import Taro, {Component, Config} from "@tarojs/taro";
import {AtImagePicker} from 'taro-ui'
import {inject, observer} from '@tarojs/mobx'
import {View, Input, Picker, Image, Text,Form,Button} from "@tarojs/components";
import PageFooterInfo from '../../components/PageFooterInfo'
import PickerArea from '../../components/PickerArea'
import {IStoreProps} from '../../store/Stores'
import {toJS} from 'mobx'

import {getRuntime,workYearsArr} from '../../utils/common'



import './index.less'
import right from '../../assets/img/right.png'


// 工程服务中心-营业执照代注册
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Page1 extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    companyName: '', // 公司名称
    registerAddress: '', // 注册地址
    registerCapital: '', // 注册资本
    businessScopeArr: [], // 经营范围
    businessScope: '', // 经营范围
    percentageArr: workYearsArr,
    percentage: '', // 持股比列
    certificateIMGArr: [], // 营业执照图片
    certificateIMG: '', // 营业执照图片
    openAnAccountIMGArr: [], // 开户许可证图片
    openAnAccountIMG: '', // 开户许可证图片
    iDcardImgArr: [], // 法人省份证正反面
    iDcardImg: '', // 法人省份证正反面
    institutionalFrameworkIMGArr: [], // 组织机构代码证
    institutionalFrameworkIMG: '', // 组织机构代码证
    registerImgArr: [], // 国税/地税登记证书
    registerImg: '', // 国税/地税登记证书
    contactsName: '', // 联系人姓名
    phoneNumnber: '', // 联系电话
    emailAddress: '', // 联系人邮箱地址
    address: '', // 联系地址
    type: 3, // 注册类型 (0 = GSBS , 1 = GSNJ , 2 = GSZX , 3 = YYZZDB ) = ['0', '1', '2', '3']
    loading: false,
    disabled: false,
    submitText: '立即预约办理'
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: '营业执照代注册'})
    let type = this.$router.params.type || null
    console.log(type)
    if(type){
      this.setState({
        type
      })
    }
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  onChangeImg(type:string,e) {
    getRuntime().uploadFile(e, res => {
      this.setState({
        [type+'Arr']: e,
        [type]: res.join(',')
      })
    })
  }

  // 地区选择
  pickerArea(res){
    this.setState({
      registerAddress: res.province.label+res.city.label+res.distract.label
    })
  }

  changePicker(type: string, e) {
    this.setState({
      [type]: this.state[type+'Arr'][e.detail.value]
    })
  }

  formSubmit(e) {
    let { type,iDcardImg,percentage, } = this.state
    let { companyName,registerAddress, registerCapital,businessScope, contactsName, phoneNumnber, emailAddress, address } = e.detail.value
    let { FinancialCenterStore } =  this.props.stores
    if(!companyName){getRuntime().showToast('公司名称不能为空~'); return false}
    if(!contactsName){getRuntime().showToast('联系人姓名不能为空~'); return false}
    if(!phoneNumnber){getRuntime().showToast('联系人电话不能为空~'); return false}
    this.setState({
      loading: true,
      disabled: true,
      submitText: '数据提交中...'
    })
    FinancialCenterStore.saveCompanyTaxReturn({
      form: {
        type, companyName,iDcardImg,businessScope,
        contactsName, phoneNumnber, emailAddress, address,registrationAddress: registerAddress,registeredCapital: registerCapital,
        shareholdingRatio:percentage
      },
      callback: () => {
        this.setState({
          loading: false,
          disabled: false,
          submitText: '立即预约办理'
        })
        getRuntime().navigateTo('/pages/business/business_success')
      }
    })
  }

  render() {
    let { loading,disabled,submitText,iDcardImgArr,percentageArr,percentage }
      = this.state
    return (
      <View className='from-wrap'>
       <Form onSubmit={this.formSubmit.bind(this)}>
         <View className='item-group pt0 pb0'>
           <View className='input-group'>
             <View className='input-name is-require'>公司名称</View>
             <Input className='from-input' name='companyName' placeholderClass='placeholder_class' placeholder='请填写公司名称'/>
           </View>
           <View className='input-group '>
             <View className='input-name is-require'>注册地址</View>
             <PickerArea name='registerAddress' onPicketArea={this.pickerArea.bind(this)} level={3} />
           </View>
           <View className='input-group'>
             <View className='input-name'>注册资本(万)</View>
             <Input className='from-input' type={"number"} name='registerCapital' placeholderClass='placeholder_class' placeholder='请填写注册资本' />
           </View>
           <View className='input-group '>
             <View className='input-name'>经营范围</View>
             {/*<Picker className='input-picker' mode='selector' range={this.state.selector} onChange={this.onChange}>
               <View className='tt'>
                 <View className='from-input picker-con'>点击选择</View>
                 <Image className='drop-down-icon' src={right}/>
               </View>
             </Picker>*/}
             <Input className='from-input' name='businessScope' placeholderClass='placeholder_class' placeholder='请填写经营范围' />
           </View>
           <View className='input-group '>
             <View className='input-name'>持股比例</View>
             <Picker className='input-picker' name='percentage' mode='selector' range={percentageArr} onChange={this.changePicker.bind(this,'percentage')}>
               <View className='tt'>
                 {!percentage&& <View className='from-input picker-con placeholder-class'>请选择</View>}
                 {percentage&& <View className='from-input picker-con'>{percentage}%</View>}
                 <Image className='drop-down-icon' src={right} />
               </View>
             </Picker>
           </View>
           <View className='input-group input-upload'>
             <View className='input-name'>上传法人、股东正反面身份证</View>
             <AtImagePicker
               length={4}
               count={2}
               showAddBtn={true}
               files={iDcardImgArr}
               name='iDcardImg'
               onChange={this.onChangeImg.bind(this,'iDcardImg')}
             />
           </View>
         </View>

         <View className='item-group pt0 pb0'>
           <View className='input-group'>
             <View className='input-name'>联系人</View>
             <Input className='from-input' name='contactsName' placeholderClass='placeholder_class' placeholder='请填写联系人' />
           </View>
           <View className='input-group'>
             <View className='input-name'>联系电话</View>
             <Input className='from-input' type={"number"} maxLength={11} name='phoneNumnber' placeholderClass='placeholder_class' placeholder='请填写联系电话' />
           </View>
           <View className='input-group'>
             <View className='input-name'>联系邮箱</View>
             <Input className='from-input' name='emailAddress' placeholderClass='placeholder_class' placeholder='请填写联系邮箱' />
           </View>
           <View className='input-group'>
             <View className='input-name'>联系地址</View>
             <Input className='from-input' name='address' placeholderClass='placeholder_class' placeholder='请填写联系地址' />
           </View>
         </View>

         <Button className='page-submit' formType='submit' disabled={disabled} loading={loading}>{submitText}</Button>
       </Form>

        <PageFooterInfo />
      </View>
    )
  }
}

export default Page1
